{extends file='layout/list-base.tpl'}

{block name='main-content'}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function() {
  $('button[name="submit"]').click(function() {
    var chapterID = $('input[name="chapterID"]').val();
    var bookName = $('input[name="bookName"]').val();
    var chapterNo = $('input[name="chapterNo"]').val();
    var url = window.location.href;
    $.ajax({
      type: "GET",
      url: "/truyen/ajax/chapterError",
      cache: false,
      data: { chapterID: chapterID, chapterNo: chapterNo, bookName: bookName, url: url },
      success: function(res){
          console.log(res);
        alert('Báo Cáo Thành Công');
        $('button[name="submit"]').remove();  
      }
    });
  });

});
</script>
<script type="text/javascript">
function adjustTextSize(elId, Step) {
  var num = $('#' + elId).css('font-size').substr(0,2);
  num = parseInt(num);
  if (isNaN(num)) num = 18;
  num += Step;
  console.log(num);
  if (num > 28) num = 28;
  if (num < 14) num = 14;
  console.log(num);
  $('#' + elId).css('font-size', num);
}

function setTextSize(elId, size) {
  var el = document.getElementById('book-detail');
  el.style.fontSize = size;
}
</script> 
{/literal}
<section id="content-holder" class="container-fluid container">
    <section class="row-fluid">
      <!-- Start Main Content -->
      <section class="span12">
        <section class="help-holder">
          <article class="left">
            <h3 class="inline" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
              <a href='{$base_url}truyen-{$chapter.c_uname}.html' itemprop="url">
                <span itemprop="title">Truyện {$category.name}</span>
              </a>
            </h3>
            <h3 class="inline" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
              <a href='{$base_url}truyen-{$chapter.c_uname}/{$chapter.b_uname}.html' itemprop="url">
                <span itemprop="title">{$chapter.b_name|escape}</span>
              </a>
            </h3>
            {if isset($chapter.volume_name)}<h3>Quyển {$chapter.volume_no|escape} :{$chapter.volume_name|escape}</h3>{/if}
            <!-- start: Dropcaps -->
            <div class="next-prev">
                {if isset($prev)}
                <a class="prev" rel="prev" href='{$base_url}truyen-{$chapter.c_uname}/{$chapter.b_uname}/chuong-{$prev.no}-{$prev.uname}.html' >
                    <img src="{$base_url}public/frontend/images/old_go_prev.png" alt="chuong-{$prev.no}-{$prev.uname}"/> Chương Trước
                </a>
                {/if}
                {if isset($next)}
                <a class="next" rel="next" href='{$base_url}truyen-{$chapter.c_uname}/{$chapter.b_uname}/chuong-{$next.no}-{$next.uname}.html' >
                    Chương Sau <img src="{$base_url}public/frontend/images/old_go_next.png" alt="chuong-{$next.no}-{$next.uname}"/>
                </a>
                {/if}
                <div class="clearboth"></div>
            </div>
            <section class="s-holder">
              <div class="sixteen columns">
                <h3>Chương {$chapter.chapter_no|escape} : {$chapter.chapter_name|escape}</h3>
                <span class="cate">
                  <input type="hidden" name="chapterID" value="{$chapter.chapter_id}" />
                  <input type="hidden" name="bookName" value="{$chapter.b_name}" />
                  <input type="hidden" name="chapterNo" value="{$chapter.chapter_no}" />
                  <button class="button" type="submit" name="submit">[Báo Truyện Bị Hỏng]</button>
                </span>
                <span class="cate">
                <a onclick="adjustTextSize('book-detail', -1);" href="javascript:void(0);" title="Thu nhỏ cỡ chữ đọc bài">
                  <img width="26" height="26" src="http://truyen.hixx.info/assets/truyen/images/zoom_out.png">
                </a>
                <a onclick="adjustTextSize('book-detail', +1);" href="javascript:void(0);" title="Phóng to cỡ chữ đọc bài">
                  <img width="26" height="26" src="http://truyen.hixx.info/assets/truyen/images/zoom_in.png">
                </a>
                </span>
                <p id="book-detail" class="book-detail">{$chapter.chapter_description|nl2br}</p>
              </div>
            </section>
            <div class="next-prev">
                {if isset($prev)}
                <a class="prev" href='{$base_url}truyen-{$chapter.c_uname}/{$chapter.b_uname}/chuong-{$prev.no}-{$prev.uname}.html' >
                    <img src="{$base_url}public/frontend/images/old_go_prev.png" alt="chuong-{$prev.no}-{$prev.uname}"/> Chương Trước
                </a>
                {/if}
                {if isset($next)}
                <a class="next" href='{$base_url}truyen-{$chapter.c_uname}/{$chapter.b_uname}/chuong-{$next.no}-{$next.uname}.html' >
                    Chương Sau <img src="{$base_url}public/frontend/images/old_go_next.png" alt="chuong-{$next.no}-{$next.uname}"/>
                </a>
                {/if}
                <div class="clearboth"></div>
            </div>
            <!-- end: Dropcaps -->
          </article>
        </section>
      </section>
      <!-- End Main Content -->
    </section>
  </section>
{/block}
